<template>
  <div class="word-cloud-item-content">
    <div class="wrap">
      <a class="fontA" v-for="(tag, index) in tags" :key="`tag-${index}`">
        <span
          :id="tag.id"
          :class="'type-'+tag.type"
          :style="{
            'left': tag.x/4 + 7.5 +'vw',
            'top': tag.y/4 +'vw',
            'fontSize': 3 * (400 / (400 - tag.z)) + 'vw',
            'height': 5.8 * (400 / (400 - tag.z)) + 'vw',
            'opacity': (RADIUS + tag.z) / 400 + 0.3,
            'zIndex': parseInt(tag.z+500),
          }"
        >
          {{ tag.text }}
        </span>
      </a>

    </div>
    <!-- <svg style="background-color: #fff">
      <a class="fontA" v-for="(tag, index) in tags" :key="`tag-${index}`">
        <text
          :id="tag.id"
          :x="tag.x"
          :y="tag.y"
          'transform': 'scale('+ (0.7 * (350 / (350 - tag.z))) +')',
          'padding': 1.2 * (400 / (400 - tag.z)) + 'vw'+ ' ' + 3.5 * (400 / (400 - tag.z)) + 'vw',
          :font-size="20 * (600 / (600 - tag.z))"
          :fill-opacity="(400 + tag.z) / 600"
          @mousemove="listenerMove($event)"
          @mouseout="listenerOut($event)"
          @click="clickToPage"
        >
          {{ tag.text }}
        </text>
      </a>
    </svg>  -->
  </div>
</template>

<script lang="ts" setup>
import { computed, ref, reactive, toRefs, watch, nextTick, onMounted, onUnmounted } from 'vue'
defineOptions({
  name: 'WordCloudItem'
})
const props = defineProps({
  data: {
    type: Array,
    default: []
  }
})
const wordList = ref([])
watch(
  () => props.data,
  (val) => {
    if(val.length>0){
      wordList.value = val;
      initData()
    }
  }
);
const width = ref(220)
const height = ref(220)
const tagsNum = ref(0)  //标签数量
const RADIUS = ref(110)  //球的半径
const speedX = ref(0)  //球的半径
const speedY = ref(0)  //球的半径

speedX.value = Math.PI / 360 / 1.5 ;
speedY.value = Math.PI / 360 / 1.5 ;

const tags = ref([])

let intervalId;


//数据，宽，高，半径，半径一般位宽高的一半。
const CX = computed(() => {
  return width.value / 2
})
const CY = computed(() => {
  return height.value / 2
})


// 初始化数据
const initData = () => {
  let dataList = props.data;
  //初始化标签位置
  let tagList = [];
  tagsNum.value = dataList.length;
  for (let i = 0; i < dataList.length; i++) {
    let tag = {};
    let k = -1 + (2 * (i + 1) - 1) / tagsNum.value;
    let a = Math.acos(k);
    let b = a * Math.sqrt(tagsNum.value * Math.PI); //计算标签相对于球心的角度
    tag.text = dataList[i];
    tag.x = CX.value + RADIUS.value * Math.sin(a) * Math.cos(b); //根据标签角度求出标签的x,y,z坐标
    tag.y = CY.value + RADIUS.value * Math.sin(a) * Math.sin(b);
    tag.z = RADIUS.value * Math.cos(a);
    tag.id = i; // 给标签添加id
    tag.type = (i%4)+1
    tagList.push(tag);
  }
  tags.value = tagList; //让vue替我们完成视图更新
}
initData()
// 纵向旋转
const rotateX = (angleX) => {
  var cos = Math.cos(angleX);
  var sin = Math.sin(angleX);
  for (let tag of tags.value) {
    var y1 = (tag.y - CY.value) * cos - tag.z * sin + CY.value;
    var z1 = tag.z * cos + (tag.y - CY.value) * sin;
    tag.y = y1;
    tag.z = z1;
  }
}


// 横向旋转
const rotateY = (angleY) => {
  var cos = Math.cos(angleY);
  var sin = Math.sin(angleY);
  for (let tag of tags.value) {
    var x1 = (tag.x - CX.value) * cos - tag.z * sin + CX.value;
    var z1 = tag.z * cos + (tag.x - CX.value) * sin;
    tag.x = x1;
    tag.z = z1;
  }
}


// 运动函数
const runTags = () => {
  if (typeof intervalId === "number") {
    clearInterval(intervalId);
    intervalId = null;
  }
  let timer = setInterval(() => {
    rotateX(speedX.value);
    rotateY(speedY.value);
  }, 50);
  intervalId = timer;
}
// 监听移入事件
const listenerMove = (e) => {
  if (e.target.id) {
    clearInterval(intervalId);
  }
}

// 监听移出事件
const listenerOut = (e) => {
  if (e.target.id) {
    runTags();
  }
}
onMounted(() => {
  runTags()
})
onUnmounted(() => {
  clearInterval(intervalId);
});
</script>


<style lang="less" scoped>
.word-cloud-item-content{
  height: 230px;
  margin: 10px 0 0;
  position: relative;
  background: #fff;
  overflow: hidden;
  box-shadow: 0px 2px 10px 0px #0000000C;
  border-radius: 5px;

  .wrap{
    width: 100%;
    height: 100%;
  }
  .fontA {
    span{
      position: absolute;
      display: flex;
      align-items: center;
      justify-content: center;
      min-width: 36px;
      text-align: center;
      padding: 0px 12px;
      color: #fff;
      border-radius: 15px;
      font-size: 14px;
      background: #02AF60;
      box-shadow: 0px 4px 5px 0px #00000026;
      word-break: keep-all;
    }
    .type-1{
      background: linear-gradient(0deg, #2B7FF0 0%, #3C8EFD 100%);
    }
    .type-2{
      background: linear-gradient(0deg, #FF4935 0%, #FF6A5E 100%, #FD493B 100%, #FF6E63 100%);
    }
    .type-3{
      background: linear-gradient(0deg, #FFDD29 0%, #FF7629 0%, #FF9929 100%);
    }
    .type-4{
      background: linear-gradient(0deg, #FFDD29 0%, #8558FE 0%, #818DFF 100%);
    }
  }
}
</style>
